<template>
  <section class="my-fleadetail">
    <div class="task flex flex-between">
      <div class="left flex">
        <img :src="info.frontImgUrl">
        <div class="flex-col flex-between content-text">
          <div class="title">{{info.productName}}</div>
          <div>
              <div class="status status-tag">{{info.displaceGoodsClass == 1?'置换':'出售'}}</div>
              <div class="status status-tag">{{typeOption[info.quality]}}</div>
          </div>
          <div class="price">￥{{info.price}}</div>
        </div>
      </div>
      <div class="right flex-col flex-bottom">
        <div class="status">{{info.productStatus == 1 ? (info.displaceGoodsClass == 1?'置换中':'出售中') : statusOption[info.productStatus]}}</div>
        <div class="mt15 num">X{{info.nums}}</div>
      </div>
    </div>
    <div class="detail">
      <div class="text">
        {{info.productDtl}}
      </div>
      <Swiper :images="info.imgList" />
    </div>
    <div class='btns flex flex-between'>
      <button v-if="info.productStatus == 1" class="btn obtained" @click.stop="soldOut(info.productId,1)">下架</button>
      <button v-if="info.productStatus == 1" @click="soldOut(info.productId,2)" class="btn complete" >完成</button>
    </div>
  </section>
</template>
<script>
import Swiper from "@/components/swiper";
export default {
  components: { Swiper },
  data() {
    return {
      productId: '',
      info: '',
      statusOption: {
        2: '完成',
        0: '下架'
      },
      typeOption: {
        1: '全新',
        2: '九成新',
        3: '八成新',
        4: '七成新',
        5: '六成新',
        6: '五成新'
      }
    };
  },
  onLoad(e) {
    this.productId = e.id ? e.id : 1;
    this.fleaselectProductDetail()
  },
  methods: {
    routerTo(id) {
      wx.navigateTo({ url: "../fleadetail/main?id=" + id });
    },
    fleaselectProductDetail() {
      this.$api.fleaselectProductDetail({ productId: this.productId }).then(res => {
        let imgList = res.data.product.imgList.map(item => {
          item.url = item.imageUrl;
          return item;
        })
        res.data.product.imgList = imgList;
        this.info = res.data.product;
      })
    },
    // 1.下架 2.完成
    soldOut(productId, type) {
      var _this = this;
      if (type == 1) {
        wx.showModal({
          title: '下架',
          content: '您要下架此商品？',
          success(res) {
            if (res.confirm) {
              _this.$api.soldOut({ productId, type }).then(res => {
                if(res.code == 0){
                  wx.showToast({
                    title: res.msg, //提示的内容,
                    icon: 'none', //图标,
                    duration: 1500, //延迟时间,
                    mask: true, //显示透明蒙层，防止触摸穿透,
                    success: res => {
                      setTimeout(function() {
                        wx.navigateBack({
                          delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                        });
                      },1500)
                    }
                  });
                }
              })
            } else if (res.cancel) {
            }
          }
        })
      } else if (type == 2) {
        wx.showModal({
          title: '完成',
          content: '您确定要完成此商品？',
          success(res) {
            if (res.confirm) {
              _this.$api.soldOut({ productId, type }).then(res => {
                if(res.code == 0){
                  wx.showToast({
                    title: res.msg, //提示的内容,
                    icon: 'none', //图标,
                    duration: 1500, //延迟时间,
                    mask: true, //显示透明蒙层，防止触摸穿透,
                    success: res => {
                      setTimeout(function() {
                        wx.navigateBack({
                          delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                        });
                      },1500)
                    }
                  });
                }
              })
            } else if (res.cancel) {
            }
          }
        })
      }


    }
  }
};
</script>
<style lang="scss" scoped>
.my-fleadetail {
  .task {
    background: white;
    padding: 25px 15px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    .left {
      img {
        width: 70px;
        height: 70px;
        border-radius: 2px;
        margin-right: 10px;
      }
      .titile {
        font-size: 15px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(46, 46, 46, 1);
        line-height: 21px;
      }
      .status {
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(193, 196, 201, 1);
        width: 45px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        background: rgba(247, 247, 247, 1);
        border-radius: 2px;
      }
      .price {
        font-size: 15px;
        font-family: PingFang;
        font-weight: 400;
        color: rgba(255, 156, 0, 1);
        line-height: 22px;
      }
    }
    .right {
      width: 100px;
      .status {
        padding: 3px 6px;
        border: 1px solid rgba(59, 184, 253, 1);
        border-radius: 2px;
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(59, 184, 253, 1);
      }
      .num {
        font-size: 15px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(193, 196, 201, 1);
      }
    }
  }
  .detail {
    margin-top: 10px;
    padding: 15px;
    background: white;
    .text {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
      line-height: 21px;
      margin-bottom: 15px;
    }
  }
  .btns {
    margin: 30px 15px;
    .btn {
      width: 165px;
      height: 44px;
      line-height: 44px;
      padding: 0;
      margin: 0;
      background: rgba(59, 184, 253, 1);
      border-radius: 5px;
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
    .obtained {
      border: 1px solid rgba(59, 184, 253, 1);
      background: white;
      color: rgba(59, 184, 253, 1);
    }
  }
}
.content-text {
  flex: 1;
}
.status-tag {
  display: inline-block;
  margin-right: 5px;
}
</style>
<style lang="scss">
page {
  background: #f7f7f7;
}
</style>